<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*
            id选择器:通过id属性值进行匹配
            语法:#id属性值
            匹配与当前选择器id值一致的元素
        */
        #p1{
            color:red;
        }
        #p2{
            color:green;
        }
        /*
            class选择器:通过元素的class属性值进行匹配
            语法:.class属性值
            匹配与当前选择器class值一致的所有元素
        */
        .c1{
            color: blue;
        }
        /*
            标签选择器:匹配对应标签的所有元素
        */
        p{
            font-size: 20px;
            color:pink;
        }
        /*
            *:匹配一切
        */
        *{
            color:yellow!important;
        }

        /*
            基本选择器优先级
            id选择器>class选择器>标签选择器>*选择器
        */
    </style>
</head>
<body>
<p id="p1" class="c1">第1个段落</p>
<p id="p2">第2个段落</p>
<p class="c1">第3个段落</p>
<p class="c1">第4个段落</p>
<p class="c1">第5个段落</p>
<p>第6个段落</p>
<p>第7个段落</p>
<p class="c1">第8个段落</p>
<p>第9个段落</p>
<p>第10个段落</p>
<div>第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
<div>第4个div</div>
<div>第5个div</div>
<span>第1个span</span>
<span>第2个span</span>
<span>第3个span</span>
<marquee behavior="" direction="">欢迎您</marquee>
</body>
</html>